<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <!-- 标题 搜索 -->
    <custom-navbar 
		:showBack="true" 
		height="183rpx" 
		backgroundImage="linear-gradient(#F5D2D4,#EFF2F6 )"
		backgroundColor="transparent"
		>
		<template #backIcon>
		  <u-icon 
		    name="/goodsPages/static/left.png" 
		    color="#fff" 
		    style="margin-right: 10px;
					width: 20rpx;
		  		  height: 38rpx;"
			class="back_icon"
		  ></u-icon>
		</template>
		<search-box :showIcon="false">
		</search-box>
    </custom-navbar>
    <!-- 热门推荐 -->
	<view class="hot">
		<h4>热门推荐</h4>
		<view class="content" >
			<button  v-for="(item,index ) in hotList" :key="index">{{item.name}}</button>
		</view>
	</view>
	<!-- 历史记录 -->
	<view class="history">
		<view class="flex-between">
			<h4>历史记录</h4>
			<image class="delete" src="/goodsPages/static/delete.png" @click="deleteHistory"></image>
		</view>
		<view class="content" >
			<button  v-for="(item,index ) in historyList" :key="index">{{item.name}}</button>
			
		</view>
	</view>
  </view>
  
</template>

<script setup>
import { reactive,onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import SearchBox from '../../components/SearchBox.vue'

// 热门推荐
const hotList = reactive([
	{name:'纸杯'},
	{name:'刀叉'}
	])

// 历史记录
const historyList = reactive([
	{name:'保鲜膜'},
	{name:'洗洁精'}
])
// 清空历史记录
const deleteHistory = ()=>{
	historyList.splice(0)
}
</script>

<style lang="scss" scoped>
	
	.container {
	  padding-bottom: 120rpx;
	  // background: url(/static/index_slices/底.png) no-repeat;
	  background-size: 100% auto;
	  
	  padding-top: 183rpx; /* 导航栏高度 */
	  .hot,.history{
		  h4{
			  color: #252B46;
			  font-size: 28rpx;
		  }
		  padding: 0 30rpx;
	  }
	  .content{
		  display: flex;
		  margin-bottom: 52rpx;
		  button{
			  padding: 0;
			  margin: 0;
			  display: inline-block;
			  width: 156rpx;
			  height: 60rpx;
			  line-height: 60rpx;
			  font-size: 26rpx;
			  color: #8C8E9B;
			  background-color: #fff;
			  border: none;
			  border-radius: 30rpx;
			  margin-right: 20rpx;
			  margin-top: 28rpx;
			  
		  }
	  }
	  .delete{
	  		width: 34rpx;
	  		 height: 38rpx;
	  }
	}
	
</style>